<template>
    <div 
    class="detail-page-list"
    :class="{'fixed-height':height}"
    :style="{height:heightStr || 'auto'}"
    >
        <div class="title paper-title-ceiling" :class="{fixed: fixedStyle}">
            <div class="main-title">
                {{title}}
            </div>

            <span class="page-index">
                {{currentPage}} / {{total}}
            </span>

            <el-button 
            type="primary"
            plain
            class="btn-download"
            size="mini"
            @click="$emit('download')"
            >
                立即下载
            </el-button>
        </div>

        <div class="scroller">
            <div 
            ref="page-item"
            class="page-item"
            v-for="(item, index) in data"
            :key="index"
            >
                <div 
                class="preview-con"
                :class="isMask(index,data,10,total) ?'gradient' : ''"
                >
                    <el-image 
                        class="img-preview"
                        :src="item[props.src]" 
                        :preview-src-list="previewSrcList"
                        fit="fill"
                    ></el-image>
                </div>
            </div>

            <slot name="end"></slot>
        </div>
    </div>
</template>

<script>
import Ceiling from '@js/Ceiling';
import appNode from '@js/app-node';

export default {
    props: {
        title: {
            type: String,
            default: '',
        },
        data: {
            type: Array,
            default: () => [],
        },
        total: {
            type: Number,
            default: 0,
        },
        props: {
            type: Object,
            default: () => ({
                src: 'filesavepath'
            }),
        },
        height: {
            type: [String, Number],
            default: '',
        },
    },
    data() {
        return {
            currentPage: 1,
            ceiline: null,

            fixedStyle: false,
        }
    },
    computed: {
        previewSrcList() {
            return this.data.map(item => item[this.props.src]);
        },
        heightStr() {
            if (typeof this.height === 'number') {
                return `this.height${px}`;
            }

            return this.height;
        },
    },
    methods: {
        initAutoPageIndex() {
            function scrollHandler() {
                var items = this.$refs['page-item'],
                    last = true,
                    current = false;

                items.forEach((item, index, arr) => {
                    var rect = item.getBoundingClientRect();

                    var y = rect.y || rect.top;

                    last = current;
                    current = y <= 0 ? true : false;

                    if (last && !current) {
                        this.currentPage = index;
                    }else if(current && arr.length == index + 1) {
                        this.currentPage = arr.length;
                    }
                });
            }

            document.querySelector('.page-body').addEventListener('scroll', appNode.throttle(scrollHandler.bind(this), 1000 / 24));
        },
        /**
         * 是否遮罩
         * @param {Number} ind 索引
         * @param {Array} arr 数组
         * @param {Number} deadlen 截止长度
         * @param {Number} total 总页数
         * @return {Boolean} 是否需要遮罩
         */
        isMask(ind,arr,deadlen,total){
            var len = arr.length,
                line = deadlen || 10;
            if(len < line || len == total){
                // 如果长度小于设定值 或 文档已经展开，则不显示遮罩
                return false
            }else{
                return ind == (deadlen - 1)
            }
        }
    },
    mounted() {
        this.ceiline = new Ceiling({
            el: document.querySelector('.paper-title-ceiling'),
            zoom: document.querySelector('.layout-card.file'),
            con: document.querySelector('.page-body'),
            handler: state => {
                this.fixedStyle = state;
            },
        });

        this.initAutoPageIndex();
    }
};
</script>

<style lang="scss" scoped>
@import "@css/var.scss";
    .detail-page-list{
        position: relative;
        margin-top: -24px;

        &.fixed-height{
            overflow-y: auto;
            margin: -10px;
            padding: 10px;
        }

        .scroller{
            position: relative;
        }
    }

    .page-item {
        border: solid 1px #d2d2d2;
        & + .page-item {
            margin-top: 24px;
        }

        .preview-con {
            .img-preview {
                width: 100%;
                min-height: 300px;
            }
        }

        .gradient {
            position: relative;

            &::after{
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(0deg, rgb(255, 255, 255), rgba(247, 247, 247, 0.5));
            }
        }
    }


    .title {
        font-size: 14px;
        line-height: 1em;
        padding-bottom: 18px;
        border-bottom: 1px solid #f0f0f0;
        padding: 24px 20px;
        margin: 0 -20px;
        background: white;

        &.fixed{
            .page-index{
                float: none;
            }

            .btn-download{
                display: inline-block;
                background: none;

                &:hover, &:focus{
                    background: $primaryColor;
                }
            }
        }
        
        .main-title{
            display: inline-block;
            font-weight: bold;
            color: #333333;
            max-width: 80%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            vertical-align: middle;
        }

        .page-index{
            display: inline-block;
            color: #666666;
            font-weight: normal;
            margin-left: 15px;
            line-height: 1em;
            vertical-align: middle;
            float: right;
        }

        .btn-download{
            display: block;
            padding: 8px 20px;
            line-height: 1em;
            float: right;
            border-radius: 6px;
            margin-top: -8px;
            display: none;
        }
    }
</style>